<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">隐患排查</block>
			</cu-custom>
			<view class="hearder" @click="gotodetail"
				v-if="resData.dangerId != null && resData.dangerId != ''">
				<view class="dl">
					<view class="dt width" v-if="resData.dangerDesc != null && resData.dangerDesc != ''">
						{{resData.dangerDesc}}</view>
					<view class="dt green">{{resData.flowStatus}}</view>
				</view>
				<view class="dl">
					<view class="dt size">排查时间：{{resData.checkTime}}</view>
					<view class="dt red">{{resData.status == 0 ? '未整改' : '已整改'}}</view>
				</view>
			</view>
			<view class="titlecontent">
				<view class="h6">检查标准 </view>
				<view class="span">{{checkCriteria}} </view>
				<view class="h6">隐患描述<view class="icon" @click="showDrawer" v-if="showSelectBtn">请选择 </view>
				</view>
				<view class="textarea">
					<textarea disabled v-model="resData.dangerDesc" placeholder-style="color:#F76260"
						placeholder="请选择隐患描述" />
					<view class="zhuyi">
						隐患描述只可以从隐患库选择，如需新增隐患描述，请联系颜工更新隐患库。如果确实存在需要现场自定义隐患描述，需在隐患库中新增一条"其他隐患"，选中"其他隐患"，就可以编辑隐患描述</view>
				</view>
				<view class="h6">整改建议 </view>
				<view class="textarea">
					<textarea v-model="resData.advise" placeholder-style="color:#F76260;height:80px;"
						placeholder="请选择整改建议" />
				</view>
				<view class="h6">位置 </view>
				<view class="textarea">
					<textarea style="height: 45px;" v-model="resData.dangerLocation"
						placeholder-style="color:#F76260;height:80px;" placeholder="请输入位置,可为空" />
				
				</view>
				<view class="h6">详细描述 </view>
				<view class="textarea">
					<textarea style="height: 70px;" v-model="resData.detailDesc"
						placeholder-style="color:#F76260;height:80px;" placeholder="请输入详细描述,可为空" />

				</view>
				<view class="h6">上传隐患图片<!-- <view class="icon xifen">从聊天记录选择 清空图片 </view> -->
					<view class="photo" v-if="showphoto">

						<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
							@progress="progress" @delete="deLete" @success="success" @fail="fail" />
					</view>
				</view>
				<view>
					<view class="fontbotm">
						<switch class="section-right" :checked="treatmentStatu.checked" @change="switchChange" />
						<view class="span">无隐患相片</view>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<button v-if="resData.dangerId != null && resData.dangerId != ''" class="cu-btn bg-red lg"
						@click="onSubmit('edit')">编辑</button>
					<button v-if="resData.dangerId == null || resData.dangerId == ''"
						class="cu-btn bg-blue lg" @click="onSubmit">提交</button>

				</view>
			</view>
			<!-- 搜索 -->
			<view class="box">
				<uni-drawer ref="showLeft" :width="320" mode="right">
					<!-- <button @click="closeDrawer">关闭Drawer</button> -->
					<view class="formbox">
						<view class="positop">
							<view class="h5">请选择隐患描述</view>
						</view>
						<uni-forms ref="form">
							<view class="listbox" v-if="formData.length != 0">
								<view class="h6">基础管理隐患</view>
								<view class="ul" v-for="(item,index) in formData" @click="checkdetail(item,1)">
									<!-- <view class="c1 bootm">深圳市龙岗区捷程职业技术培训学校</view> -->
									<view class="qinse">
										<view class="span">{{index+1}}.</view> {{item.dangerDesc}}
									</view>
									<view class="c2 bootm">{{item.rectify}}</view>
								</view>
							</view>
							<view class="listbox" v-if="formDataMode.length != 0">
								<view class="h6" style="margin-top: 20px;">现场管理隐患</view>
								<view class="ul" v-for="(item,index) in formDataMode" @click="checkdetail(item,0)">
									<!-- <view class="c1 bootm">深圳市龙岗区捷程职业技术培训学校</view> -->
									<view class="qinse">
										<view class="span">{{index+1}}.</view> {{item.dangerDesc}}
									</view>
									<view class="c2 bootm">{{item.rectify}}</view>
								</view>
							</view>
							
						</uni-forms>
					</view>
					<!-- 	<view class="uni-btn-v">
						<button type="warn" @click="submit">提交</button>
					</view> -->
				</uni-drawer>
			</view>

			<!-- 隐患二级弹框-->
			<!-- <uni-popup ref="yinpopup" type="bottom" :mask-click="false">
				<view class="scortop">
					<view class="title"></view>
				</view>
				<view class="scrollbox">
					<view class="box">
						<view class="formbox">
							<view class="positop">
								<view class="h5">请选择隐患描述</view>
							</view>
							<uni-forms ref="form">
								<view class="ul" @click="checkdetail(items)" v-for="items in yinpopupdata">
									<view class="qinse">
										{{items.dangerDesc}}
									</view>
									<view class="c2 bootm">{{items.rectify}}</view>
								</view>
							</uni-forms>
						</view>

					</view>

				</view>
			</uni-popup> -->
			
			<!-- <uni-popup ref="yinpopup" type="bottom" :mask-click="true">
				<view class="scortop">
					<view class="title">请选择隐患描述</view>
				</view>
				<view class="scrollbox">
					<view class="titlecontent">
						<view class="box">
							<view class="formbox">
								<uni-forms ref="form">
									<view class="ul" @click="checkdetail(items)" v-for="items in yinpopupdata">
										<view class="qinse">
											{{items.dangerDesc}}
										</view>
										<view class="c2 bootm">{{items.rectify}}</view>
									</view>
								</uni-forms>
							</view>
						
						</view>
					</view>
				</view>
			</uni-popup> -->
			
			
			
		</scroll-view>
	</view>

</template>

<script>
	import server from '@/api/server.js'

	export default {
		components: {

		},
		data() {
			return {
				checkCriteria: '',
				treatmentStatu: {
					checked: false
				},
				resData: {
					dangerDesc: '',
					detailDesc: '',
					dangerLocation:'',
				},
				imageValue: [],
				myFormData: [],
				photoData: [],
				yinpopupdata:[],
				searchId: '',
				showphoto: true,
				modalName: null,
				formData: [],
				formDataMode:[],
				showSelectBtn: false,
				selectItem:{}
			}
		},
		onLoad(options) {

		},
		mounted() {
			this.checkCriteria = this.$root.$mp.query.checkCriteria
			this.searchId = this.$root.$mp.query.searchId
			this.getrectifyList()
		},
		methods: {
			compcloseTwo() {
				this.$refs.yinpopup.close()
			},
			gotodetail() {
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开 
					url: '/pages/education/dangerdetail?id=' + this.resData.dangerId
				})
			},
			//图片
			apiditBatch(index) {
				this.imageValue = []
				let dataphot = this.photoData
				dataphot.forEach(item => {
					this.imageValue.push({
						name: item.id,
						extname: '',
						url: item.url
					})

				})
				console.log(this.imageValue)
			},
			//编辑
			// onEditSubmit(){
			// 	uni.showLoading()
			// 	server.dangeredit(this.resData).then(res => {
			// 			console.log(res)
			// 			if (res.data.code == 200) {
			// 				this.$tip.success('编辑成功!')
			// 				uni.hideLoading();
			// 				uni.navigateBack({
			// 					delta: 1
			// 				});
			// 			} else {
			// 				this.$tip.success('编辑失败!')
			// 				uni.hideToast();
			// 			}
			// 	})
			// },
			//提交//编辑
			onSubmit(num) {
				let photoList = []
				this.myFormData.forEach(function(item,index) {
					photoList.push(item)
				})
				this.resData.photoList = photoList
				this.resData.schoolCheckId = this.$root.$mp.query.checkId
				// if(this.resData.dangerLocation == '' || this.resData.dangerLocation == null){
				// 	this.$tip.success('位置不能为空!')
				// 	return
				// }
				if (num == 'edit') {
					this.resData.id = this.resData.dangerId
					server.schooldangeredit(this.resData).then(res => {
						this.$nextTick(function() {
							console.log(res)
							if (res.data.code == 200) {
								this.$tip.success('编辑成功!')
								uni.navigateBack(1)
							} else {
								this.$tip.success('编辑失败!')
							}
						});

					})
				} else {
					server.schooldangeradd(this.resData).then(res => {
						this.$nextTick(function() {
							console.log(res)
							if (res.data.code == 200) {
								this.$tip.success('提交成功!')
								uni.navigateBack(1)
							} else {
								this.$tip.success('提交失败!')
							}
						});

					})
				}

			},
			//选中隐患描述
			checkdetail(item,index) {
				console.log(item)
				this.imageValue = []
				this.$refs["showLeft"].close()
				this.resData.checkCriteriaId = item.educationCriteriaId
				this.resData.checkRectifyId = item.id
				this.resData.score = item.score
				this.resData.deadline = item.deadline
				this.resData.detailDesc = item.detailDesc
				this.resData.advise = item.rectify
				this.resData.dangerLocation = item.dangerLocation
				this.resData.dangerId = item.dangerId
				this.resData.dangerDesc = item.dangerDesc
				this.resData.flowStatus = item.flowStatus
				this.resData.checkTime = item.checkTime
				this.resData.status = item.status
				this.resData.isBasics = index  //isBasics 基础1，现场=0
				this.photoData = item.photoList
				this.apiditBatch()
				// if(item.clause == 1){
				// 	this.resData.checkCriteriaId = item.educationCriteriaId
				// 	this.resData.checkRectifyId = item.id
				// 	this.resData.dangerDesc = item.dangerDesc
				// 	this.selectItem = item
				// 	this.$refs.yinpopup.open('top')
				// 	server.rectifyitemlist({dangerType:item.dangerType}).then(res => {
				// 		console.log(res)
				// 		this.yinpopupdata = res.data.result.records
				// 	})
				//  this.$refs["showLeft"].close()
				// }else if(item.clause == 0){
				// 	this.resData.checkCriteriaId = item.educationCriteriaId
				// 	this.resData.checkRectifyId = item.id
				// 	this.resData.dangerDesc = item.dangerDesc
				// 	this.resData.advise = item.rectify
				// 	if(item.dangerList.length>0){
				// 		this.resData.detailDesc = item.dangerList[0].detailDesc
				// 		this.resData.dangerId = item.dangerList[0].dangerId
				// 		this.resData.flowStatus =  item.dangerList[0].flowStatus
				// 		this.resData.checkTime =  item.dangerList[0].checkTime
				// 		this.resData.status =  item.dangerList[0].status
				// 		this.photoData =  item.dangerList[0].photoList
				// 	}
				// 	this.imageValue = []
				// 	this.apiditBatch()
				//     this.$refs["showLeft"].close()
				// }else{
				// 	this.resData.checkRectifyItemId = item.id
				// 	// this.resData.dangerDesc +="（"+item.dangerDesc+"）";
				// 	this.resData.dangerDesc = item.dangerDesc;
				// 	this.resData.advise = item.rectify
				// 	let con=true;
				// 	if(this.selectItem.dangerList.length>0){
				// 		this.selectItem.dangerList.forEach(danger =>{
				// 			if(danger.rectifyItemId == item.id && danger.rectifyId == this.selectItem.id){
				// 				console.log('this.selectItem',this.selectItem)
				// 				this.resData.detailDesc = danger.detailDesc
				// 				this.resData.dangerId = danger.dangerId
				// 				this.resData.flowStatus =  danger.flowStatus
				// 				this.resData.checkTime =  danger.checkTime
				// 				this.resData.status =  danger.status
				// 				this.photoData =  danger.photoList
				// 				this.imageValue = []
				// 				this.apiditBatch()
				// 				con=false;
				// 			}
				// 		})
				// 	}
				// 	if(con){
				// 		this.resData.dangerId = ''
				// 		this.photoData = []
				// 		this.imageValue = []
				// 	}
				//     this.$refs["yinpopup"].close()
				// }
			},
			//查询隐患描述列表侧边栏
			getrectifyList() {
				console.log('1111121212')
				server.rectifylistByCriteria({
					checkId: this.$root.$mp.query.checkId,
					criteriaId: this.$root.$mp.query.id
				}).then(res => {
					console.log(res)
					this.$nextTick(function() {
						
						this.formData = res.data.result.basics
						this.formDataMode = res.data.result.scene
						console.log(this.formData,'formDataformData')
						console.log(this.formDataMode,'formDataModeformDataModeformDataMode')
						if (this.formData != undefined && this.formData.length > 1) {
							this.showSelectBtn = true
						}else if (this.formDataMode != undefined && this.formDataMode.length >= 1) {
							this.showSelectBtn = true
						}
						let item = {}
						if (this.formData.length > 0) {
							this.resData.isBasics = 1  //isBasics 基础1，现场=0
							item = this.formData[0]
							var that = this
							if (this.searchId) {
								this.formData.forEach(function(data) {
									if (data.id == that.searchId) {
										item = data
				
									}
								})
							}
						}else if(this.formDataMode.length > 0){
							this.resData.isBasics = 0  //isBasics 基础1，现场=0
							item = this.formDataMode[0]
							var that = this
							if (this.searchId) {
								this.formDataMode.forEach(function(data) {
									if (data.id == that.searchId) {
										item = data
											
									}
								})
							}
						}
						this.resData.checkCriteriaId = item.educationCriteriaId
						this.resData.checkRectifyId = item.id
						this.resData.score = item.score
						this.resData.deadline = item.deadline
						this.resData.detailDesc = item.detailDesc
						this.resData.advise = item.rectify
						this.resData.dangerLocation = item.dangerLocation
						this.resData.dangerId = item.dangerId
						this.resData.dangerDesc = item.dangerDesc 
						this.resData.flowStatus = item.flowStatus
						this.resData.checkTime = item.checkTime
						this.resData.status = item.status
						this.photoData = item.photoList
						this.apiditBatch()
					});
				})
				// server.rectifylistByCriteria({
				// 	checkId: this.$root.$mp.query.checkId,
				// 	criteriaId: this.$root.$mp.query.id
				// }).then(res => {
				// 	console.log(res)
				// 	this.$nextTick(function() {
				// 		this.formData = res.data.result
				// 		if (this.formData.length > 0) {
				// 			if (this.formData.length == 1) {
				// 				this.showSelectBtn = false
				// 			}
				// 			this.selectItem = this.formData[0]
				// 			var that = this
				// 			if (this.searchId) {
				// 				this.formData.forEach(function(data) {
				// 					if (data.id == that.searchId) {
				// 						that.selectItem = data
				// 					}
				// 				})
				// 			}
				// 			if(this.selectItem.clause == 1){
				// 				this.$refs.yinpopup.open('top')
				// 				server.rectifyitemlist({dangerType:this.selectItem.dangerType}).then(res => {
				// 					console.log(res)
				// 					this.yinpopupdata = res.data.result.records
				// 					if(this.yinpopupdata == null || this.yinpopupdata.length == 0){
				// 						this.$refs["yinpopup"].close()
				// 					}else{
				// 						this.resData.checkCriteriaId = this.selectItem.educationCriteriaId
				// 						this.resData.checkRectifyId = this.selectItem.id
				// 						this.resData.dangerDesc = this.selectItem.dangerDesc
				// 					}
				// 				})
				// 			}else{
				// 				this.resData.checkCriteriaId = this.selectItem.educationCriteriaId
				// 				this.resData.checkRectifyId = this.selectItem.id
				// 				this.resData.dangerDesc = this.selectItem.dangerDesc
				// 				this.resData.advise = this.selectItem.rectify
				// 				if(this.selectItem.dangerList.length>0){
				// 					this.resData.detailDesc = this.selectItem.dangerList[0].detailDesc
				// 					this.resData.dangerId = this.selectItem.dangerList[0].dangerId
				// 					this.resData.flowStatus =  this.selectItem.dangerList[0].flowStatus
				// 					this.resData.checkTime =  this.selectItem.dangerList[0].checkTime
				// 					this.resData.status =  this.selectItem.dangerList[0].status
				// 					this.photoData =  this.selectItem.dangerList[0].photoList
				// 				}
				// 				this.imageValue = []
				// 				this.apiditBatch()
				// 			}
				// 		}
				// 	});
				// })
			},
			showDrawer() {
				this.$refs["showLeft"].open();
			},
			// 获取上传状态
			select(e) {
				var that = this
				console.log(this.imageValue)
				var tempFilePaths = []
				tempFilePaths = e.tempFilePaths
				tempFilePaths.forEach(function(item) {
					that.$http.upload(that.$config.apiUrl + '/sys/common/upload?biz=school', {
							filePath: item,
							name: 'file'
						})
						.then(res => {
							if (res.data.success) {
								that.myFormData.push({
									path:item,
									url:res.data.message
								})
								that.$tip.success('上传成功！')
							} else {
								that.$tip.error('上传失败！')
							}
						})
						.catch(err => {
							that.$tip.error(err.data.message)
						});
				})


			},
			//删除图片
			deLete(e) {
				console.log(e)
				if(this.myFormData.length>0){
					var index = -1
					this.myFormData.forEach((item,i)=>{
						if(e.tempFilePath == item.path){
							index=i
						}
					})
					if(index > -1){
						this.myFormData.splice(index,1)
					}
				}
				server.schooldangerphoto(e.tempFile.name).then(res => {
					this.$nextTick(function() {
						console.log(res)
					});
				
				})
			},
			switchChange(e) {
				let value = e.target.value
				let that = this
				this.$set(this.treatmentStatu, 'checked', value) // 将点击改变的状态赋给treatmentStatu.checked
				if (value && !this.havePromise) {
					uni.showModal({
						title: '提示',
						content: '设置为无隐患相片',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定')
								that.showphoto = false
								that.myFormData = []
								that.imageValue = []
							} else if (res.cancel) {
								that.showphoto = true
								that.$set(that.treatmentStatu, 'checked', false) // 手动修改switch的状态，视图会同步更新
								console.log('用户点击取消');
							}
						}
					});
				} else {
					that.showphoto = true
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.hearder {
		margin-bottom: 10px;
		background: white;
		padding: 10px;

		.dl {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;

			.width,
			.size {
				width: 75%;
			}

			.dt {
				padding: 4px 10px;
				font-size: 15px;
				border-radius: 30px;

			}

			.dt.size {
				color: #999;
			}

			.dt.green {
				border: 1px solid #52c41a;
				color: #52c41a;
			}

			.dt.red {
				border: 1px solid red;
				color: red;
			}
		}
	}

	.titlecontent {
		background: white;
	}

	.titlecontent {
		padding: 20px 15px;

		.h6 {
			float: left;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 10px;
			font-size: 18px;
			position: relative;
			padding-left: 10px;
			float: left;
		}

		.h6:before {
			width: 5px;
			content: '';
			height: 25px;
			background-color: #007aff;
			display: inline-block;
			border-radius: 7px;
			position: absolute;
			top: 0;
			left: 0;

		}

		.photo {
			margin-top: 10px;
		}

		.span {
			display: inline-block;
			font-size: 16px;
			margin-bottom: 10px;
		}

		.icon {
			float: right;
			color: #007aff;

		}

		.icon.xifen {
			font-size: 14px;
			color: #999;
		}

		.textarea {
			float: left;
			width: 100%;

			uni-textarea {
				padding: 10px;
				border: 1px solid #8799a3;
				border-radius: 10px;
				width: 100%;
				height: 120px;
				margin-bottom: 10px;
			}

			textarea {
				padding: 10px;
				border: 1px solid #8799a3;
				border-radius: 10px;
				width: 100%;
				height: 120px;
				margin-bottom: 10px;
			}

			.zhuyi {
				color: red;
				font-size: 15px;
				margin-bottom: 10px;
			}
		}
	}

	.box .formbox .ul {
		display: unset;
		float: left;
		width: 100%;
		margin-bottom: 5px;
		border-bottom: 1px solid #ccc;
	}

	.box .formbox .h5 {
		margin-bottom: 20px;
	}
	.box .formbox .h6 {
		font-size: 16px;
		font-weight: bold;
		color: red;
		float: left;
	}

	.fontbotm {
		float: left;
		width: 100%;

		uni-switch,
		switch {
			width: 50px;
		}
	}

	.qinse .span {
		display: inline-block;
		font-size: 14px;
		font-weight: bold;
	}
</style>
